<script>
  export default{
    name:'upload',
    
    props:{
       
       quality:{
          type:Number,
          default:0.5
       },
       width:{
          type:Number,
          default:202
       },
       height:{
          type:Number,
          default:125
       }
    
    },
    
    methods:{
      
        loadImage(e){
          
          let files  = e.target.files
          let temp = []
          for(let x = 0; x < files.length;++x){
          
           
           
                             let fileReader = new FileReader()
                             fileReader.readAsDataURL(e.target.files[x])
                        
                            
                        
                             fileReader.onload = (e) => {
                                 
                                       
                                     
                                     if((e.target.result).indexOf("data:image/jpeg") != -1) {
                                      
                                        
                                        let canvas = document.getElementById('canvas')
                                        let ctx  = canvas.getContext('2d')
                                        var img = new Image();
                                        img.src = e.target.result
                                        
                                        img.onload = function (){
                                            ctx.drawImage(img,0,0,this.width,this.height);
                                            let arquivo         = new Object()
                                            arquivo.data        = canvas.toDataURL("image/jpeg",this.quality)//e.target.result
                                            arquivo.file_name   = files[x].name  
                                            arquivo.main_photo  = 2
                                            temp.push(arquivo)
                                         
                                        
                                        }
                                       
                                     }       
                                     
                             }
                             
                                  
                              if(x > 4)
                              {
                                   break    
                              }
                                     
                        }
          
                      this.arquivos = temp
                      setTimeout(function () { this.send(this.arquivos) }.bind(this), 1000)   
                      
                 
        
        }
       

        ,
     
        setPrincipal(data){
            for(let x = 0 ; x < this.arquivos.length;++x){
                this.arquivos[x].main_photo = 2
            }
            this.arquivos[this.arquivos.indexOf(data)].main_photo = 1
            
            this.send(this.arquivos) 
       },
      
        setRemove(data){
            this.arquivos.splice(this.arquivos.indexOf(data),1);
            this.send(this.arquivos)
        },    
      
    
      
        setRemoveAll(){
           this.arquivos = []        
           this.send(this.arquivos) 
        },
      
        resetAll(){
            for(let x = 0 ; x < this.arquivos.length;++x){
                this.arquivos[x].main_photo = 2
            }
        
            this.send(this.arquivos) 
        },
      
        send(value){
            let data = value 
            this.$store.dispatch('files/setFiles', data)
        }
      
        
    },
     
    data(){
      return{
         arquivos:[]
        
      }       
    }
  }

</script>
<template>
<div>
  
    <div class="file" v-show="arquivos.length == 0">     
     <p></p>
     <input type="file" id="input" multiple="true"  @change="loadImage" accept="image/jpg">  
   </div>
               
               
        
                              <canvas id="canvas" :width="width" :height="height" v-show="false"></canvas>
                
                              <br>
                              <div class="table-responsive" v-show="arquivos.length > 0">
                              
                              <table id="mytable" class="table table-bordred table-striped">
                                <tr>
                                    <th colspan="2">
                                        Nome do Arquivo
                                    </th>
                                    <th width="25px">
                                        <a href="#" @click.prevent="resetAll()" v-b-tooltip.bottom title="REMOVE PRINCIPAL" ><span><i class="fa fa-circle-o" aria-hidden="true"></i></span></a>    
                                    </th>
                                    
                                    <th width="25px">
                                       <a href="#" @click.prevent = "setRemoveAll()" v-b-tooltip.bottom title="LIMPAR LISTA" >  <span><i class="fa fa-times text-danger" aria-hidden="true"></i></span></a>
                                    </th>
                                </tr>
                                <tr v-for="(arquivo,x) in arquivos">
                                 <td width="40px" ><img :src="arquivo.data" width="45" height="35" ></img></td>
                                 <td>{{arquivo.file_name}}</td> 
                                 <td>
                                    <a href="#" @click.prevent="setPrincipal(arquivo)" >
                                         <span v-show="arquivo.main_photo != 2"  v-b-tooltip.bottom title=" PRINCIPAL" ><i class="fa fa-circle" aria-hidden="true"></i></span>
                                         <span v-show="arquivo.main_photo == 2"  v-b-tooltip.bottom title="DEFINIR COMO PRINCIPAL" ><i class="fa fa-circle-o" aria-hidden="true"></i></span>
                                    </a>  
                                 </td>
                                 <td>
                                    <span>
                                        <a href="#" @click.prevent="setRemove(arquivo)"  v-b-tooltip.bottom title="REMOVER IMAGEM" >
                                              <i class="fa fa-times text-danger" aria-hidden="true"></i>
                                        </a>
                                     </span>
                                  </td>
                                </tr>
                            </table>
                          </div>
       
   
   
 </div>
</template>
<style scoped>


.file{
	width: 100%;
	max-width: 250px;
	position: relative;
	margin: 1em auto;
	background: #34495e;
	border-radius: 5px;
}

.file input[type="file"]{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.file p{
	text-align: center;
	font-size: 2em;
	color: #FFF;
	padding: 15px;
	color: #FFF;
}

.file p:before{
	content: "\01F4C1";
}

.file:hover p:before{
	content: "\01F4C2";
}

/*
img{
  width: 40px;  
  height: 40px;
}*/

.fa{
  margin-top: 10px;
  margin-bottom: 0px;
}

th{
  background-color: #eee;  
}

</style>
